<template>
  <div class="list">
    <div class="pager-title">{{$route.meta.title}}</div>
    <el-form size="small" :inline="true" :model="whereData" class="search-from">
      <el-form-item>
        <el-input @keyup.enter.native="fetchData()" clearable v-model="whereData.dealNo" placeholder="合同名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input @keyup.enter.native="fetchData()" clearable v-model="whereData.dealNo" placeholder="合同编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          style="width: 280px"
          v-model="whereData.daterange"
          type="daterange"
          range-separator="至"
          start-placeholder="到期日期(开始)"
          end-placeholder="到期日期(结束)"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select @change="fetchData" v-model="whereData.dealNo" placeholder="请选择合同状态">
          <el-option label="待我签约" value="1"></el-option>
          <el-option label="待创客签约" value="2"></el-option>
          <el-option label="签约完成" value="3"></el-option>
          <el-option label="合同已过期" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      @sort-change="sortList"
      v-loading="isLoading"
      style="width: 100%;">
      <el-table-column
        align="center"
        prop="id"
        sortable="custom"
        label="ID">
      </el-table-column>
      <el-table-column
        sortable="custom"
        align="center"
        prop="contract_name"
        label="合同名称">
      </el-table-column>
      <el-table-column
        sortable="custom"
        align="center"
        prop="contract_no"
        label="合同编号">
      </el-table-column>
      <el-table-column
        sortable="custom"
        align="center"
        show-overflow-tooltip
        prop="time_end"
        :formatter="formatTime"
        label="合同到期时间">
      </el-table-column>
      <el-table-column
        sortable="custom"
        align="center"
        show-overflow-tooltip
        prop="time_add"
        :formatter="formatTime"
        label="发起时间">
      </el-table-column>
      <el-table-column
        sortable="custom"
        align="center"
        show-overflow-tooltip
        prop="status_sign"
        label="合同状态">
      </el-table-column>
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="address"
        label="合同类型">
      </el-table-column> -->
      <el-table-column
        align="center"
        width="180px"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" v-if="whereData.dealNo < 3" @click="doSign(scope.row)">签署</el-button>
          <el-button size="mini" type="primary" v-else @click="doSign(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pageIndex"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>
<script>
import tableMixin from '@/common/mixins/tableData'
export default {
  name: 'list',
  mixins: [tableMixin],
  data() {
    return {
      listApi: '/company/contract/get',
      whereData: {
        company: '',
        index: '',
        dealNo: '',
        daterange: ''
      }
    }
  },
  methods: {
    doSign(row) {
      console.log(row)
    }
  }
}
</script>